<template>
  <div class="basic_wrap">
    <bsHeader
      :title="$t('user.passwordChange')"
      @backurl="$router.back()"
    />
    <div class="desc_warp">
      <van-form
        label-width="115px"
        @submit="onSubmit"
      >
        <van-field
          v-model="form.password"
          name="password"
          :type="passwordType"
          :label="$t('user.old_password')"
          :placeholder="$t('user.old_password')"
          :rules="[{ required: true, message: $t('user.input_old_password') }]"
        >
          <template slot="right-icon">
            <span
              class="solts"
              @click="switchPasswordType('password')"
            >
              <van-icon
                v-if="passwordType === 'password'"
                name="eye"
              />
              <van-icon
                v-else
                name="closed-eye"
              />
            </span>
          </template>
        </van-field>
        <van-field
          v-model="form.new_password"
          :type="new_passwordType"
          name="new_password"
          :label="$t('user.new_password')"
          :placeholder="$t('user.new_password')"
          :rules="[{ required: true, message: $t('user.input_new_password') }]"
        >
          <template slot="right-icon">
            <span
              class="solts"
              @click="switchPasswordType('new_password')"
            >
              <van-icon
                v-if="new_passwordType === 'password'"
                name="eye"
              />
              <van-icon
                v-else
                name="closed-eye"
              />
            </span>
          </template>
        </van-field>
        <van-field
          v-model="form.re_new_password"
          :type="re_new_passwordType"
          name="re_new_password"
          :label="$t('user.re_new_password')"
          :placeholder="$t('user.re_new_password')"
          :rules="[{ required: true, message: $t('user.input_re_new_password') }]"
        >
          <template slot="right-icon">
            <span
              class="solts"
              @click="switchPasswordType('re_new_password')"
            >
              <van-icon
                v-if="re_new_passwordType === 'password'"
                name="eye"
              />
              <van-icon
                v-else
                name="closed-eye"
              />
            </span>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
          >
            {{$t('utils.submit')}}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Fetch from "../../utils/fetch";
import bsHeader from "../../components/bsHeader.vue";
import { Form, Field, Button, Icon } from "vant";
Vue.use(Form).use(Field).use(Button).use(Icon);
export default {
  name: "Password",
  components: {
    bsHeader,
  },
  data() {
    return {
      form: {
        password: "", // 原密码
        new_password: "", // 新密码
        re_new_password: "", // 重复新密码
      },
      passwordType: "password", //输入框类型
      new_passwordType: "password", //输入框类型
      re_new_passwordType: "password", //输入框类型
    };
  },
  created() {
    if (window.plus) {
      window.plus.navigator.setStatusBarBackground("#FFFFFF");
      window.plus.navigator.setStatusBarStyle("dark");
    }
    this.$parent.footer("user", false);
  },
  mounted() {},
  methods: {
    switchPasswordType(name) {
      this[name + 'Type'] =
        this[name + 'Type'] === "password" ? "text" : "password";
    },
    onSubmit() {
      if (this.form.password === this.form.new_password) {
        this.$toast(this.$t("user.newPasswordWarning"));
      } else if (this.form.new_password !== this.form.re_new_password) {
        this.$toast(this.$t("login.repasswordError"));
      } else {
        Fetch("/user/password", {
          password: this.form.password,
          new_password: this.form.new_password,
          re_new_password: this.form.re_new_password,
          language: localStorage.getItem("lang") || "en_us",
        }).then((r) => {
		if (r.code === 1) {
			this.recharge();
		}
        }).catch(() => {});
      }
    },
    recharge() {
      this.$toast({
        message: this.$t("user.passwordChangeSuccess"),
        duration: 3000,
        onClose: () => {
          this.$router.push({
            path: "/user",
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.desc_warp {
  margin: 20px;
  margin-top: 70px;
  text-align: center;
}
</style>
